<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      button {
        width: 100px;
        height: 50px;
        font-size: 22px;
      }
      div {
        width: 300px;
        height: 300px;
        margin: 30px 0;
        background-color: skyblue;
      }
      .current {
        background-color: yellowgreen;
      }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
      $(function () {
        // console.log($('button:first'))
        $('button:first-of-type').on('click', function () {
          $('div').toggleClass('current')
        })
      })
    </script>
  </head>
  <body>
    <button>切换1</button>
    <button>切换2</button>
    <button>切换3</button>
    <div>牡丹虽好空入目，枣花最小结实诚;</div>
  </body>
</html>
